{% extends "manage/layout.html" %}

{% set page_title = '设备管理' %}

{% block css %}
		<style>
			.pull-right>span{
				width:0;
				height: 0;
				display: inline-block;
				border-top:17px solid transparent;
				border-bottom: 17px solid transparent;
				border-right: 34px solid #ccc;
				vertical-align: bottom;
			}
			.pull-right>button{
				border-radius: 0;
				margin-left:-4px;
			}
			td.comment{
				width:200px;
			}
		</style>
{% endblock %}

{% block content %}
<div class="m-content">
	<div class="table-top">
		<button id="new" class="btn btn-default">添加</button>
		<div class="pull-right">
			<span></span>
			<button id="return" class="btn btn-default">返回</button>
		</div>
	</div>
	<table class="table table-bordered table-striped table-condensed">
		<thead>
			<tr>
				<th>设备ID</th>
				<th>钢琴ID</th>
				<th>安卓设备ID</th>
				<th>位置</th>
				<th>上次初始化时间</th>
				<th>首次初始化时间</th>
				<th>硬件版本</th>
				<th>软件版本</th>
				<th>备注</th>
				<th>管理</th>
			</tr>
		</thead>
		<tbody>
			{% for d in devices %}
			<tr id="{{ d.id }}">
				<td>{{ d.id }}</td>
				<td>{{ d.piano_id }}</td>
				<td>{{ d.tablet_id }}</td>
				<td>{{ d.position }}</td>
				<td>{{ d.updated_at }}</td>
				<td>{{ d.created_at }}</td>
                <td>{{ d.tablet_version or '' }}</td>
				<td>{{ d.app_version or '' }}</td>
				<td><span class="text">{{ d.comments }}</span></td>
				<td><span class="glyphicon-edit glyphicon"></span><span class="glyphicon-trash glyphicon"></span></td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
</div>

<div class='hidden'>{{ school_id }}</div>

<div class="modal" id="deletemodal">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-body">
				<p>确认删除？</p>
				<button class="btn btn-danger">确认</button>
				<button class="btn btn-default">取消</button>
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block js %}
<script>
$(function(){
	var classroom_id = window.location.pathname.split('/')[3];

	var trash_device_id;

	$('#return').bind('click', function(){
		var school_id = $('div.hidden').text();
		window.location.href = '/manage/schools/' + school_id + '/classrooms';
	});

	$('#new').bind('click', function(){
		window.location.href = '/manage/classrooms/'+ classroom_id +'/devices/new';
	});

	// delete device
	$('.glyphicon-trash').bind('click', function(){
		trash_device_id = $(this).parent().parent().attr('id');
		$('#deletemodal').modal('show');
	});

	$('#deletemodal button').bind('click', function(){
		$('#deletemodal').modal('hide');
	})

	$('#deletemodal button.btn-danger').bind('click', function(){
		var url = '/manage/devices/delete/' + trash_device_id;
		$.post(url, function(data){
			if (data['code'] != 0){
				alert(data['msg']);
				return;
			}
			location.reload();
		}, 'json');
	});

	// edit device
	$('.glyphicon-edit').bind('click', function(){
		var device_id = $(this).parent().parent().attr('id');
		window.location.href = '/manage/classrooms/'+ classroom_id +'/devices/' + device_id;
	});
});
</script>
{% endblock %}
